<template>
	<view class="setUp">
		<view class="navBox">
			<image src="/static/pages/index/bgImg.png" class="bgImg" mode=""></image>
			<view class="navBox1">
				<view class="title">

					<image src="/static/pages/index/icon_back_lift.png" mode="" class="icon_back_lift"
						@click="backClick"></image>
					<view class="navWord">我的</view>
				</view>
				<view class="navImg" v-if="avaS" @click="chooseImage">
					<image :src="avatar" class="tx" mode=""></image>
					<image class="jia" src="/static/pages/my/icon_db2iv8q7h4l/tianjia1.png" mode=""></image>
				</view>
				<view class="navImg" v-if="avaS==false">
					<image src="/static/pages/index/img_aviter.png" class="tx" mode=""></image>
					<image class="jia" src="/static/pages/my/icon_db2iv8q7h4l/tianjia1.png" mode=""></image>
				</view>

				<view class="nickName">
					{{nickname}}
				</view>
			</view>
		</view>
		<view class="list">
			<view class="li" @click="navto" data-url='set_name'>
				<view class="li_1">
					昵称
				</view>
				<view class="li_2">
					<view class="li_2_1">
						{{nickname}}
					</view>
					<image class="li_2_2" src="/static/pages/index/right.png" mode=""></image>
				</view>
			</view>
			<view class="li">
				<view class="li_1">
					姓名
				</view>
				<view class="li_2">
					<view class="li_2_1">
						{{username}}
					</view>
					<!-- <image class="li_2_2" src="/static/pages/index/right.png" mode=""></image> -->
				</view>
			</view>
			<view class="li">
				<view class="li_1">
					性别
				</view>
				<view class="li_2">
					<view class="li_2_1">
						{{gender}}
					</view>
					<!-- <image class="li_2_2" src="/static/pages/index/right.png" mode=""></image> -->
				</view>
			</view>
			<view class="li" @click="navto" data-url='set_mobile'>
				<view class="li_1">
					手机号
				</view>
				<view class="li_2">
					<view class="li_2_1">
						{{mobile}}
					</view>
					<image class="li_2_2" src="/static/pages/index/right.png" mode=""></image>
				</view>
			</view>


		</view>
		<view class="tuideng">
			<view class="" @click="tuichu">
				退出登录
			</view>
		</view>
		<view class="zhezhao" v-if="tui">
			<view class="kuang">
				<image class="cha" src="/static/pages/index/cloose.png" mode="" @click="tuiding"></image>
				<view class="kuang_title">确定要退出登录吗</view>
				<view class="liecan">
					<view class="qu" @click="quxiao">取消</view>
					<view class="que" @click="que_ding">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		editUser,login
	} from '@/request/api.js'
	export default {
		data() {
			return {
				tui: false,
				user: '',
				avatar: '',
				avaS: true,
				id: '',
				nickname:'',
				username:'',
				gender:'',
				mobile:'',
				user1:''
			};
		},
		onLoad() {
			this.$forceUpdate()
			let that = this
			
			console.log(that.user1,"学学学")
			// that.user = uni.getStorageSync('regionMessage');
			console.log(uni.getStorageSync('regionMessage'),"头像工具简介")
			let a = uni.getStorageSync('regionMessage')
			that.avatar = 'https://dy.nuofenggr.com' + a.avatar
		},
		onShow() {
			this.$forceUpdate()
			this.login1()
			
		},
		methods: {
			login1(){
				let a = uni.getStorageSync('mobile')
				let b = uni.getStorageSync('password')
				let that = this
				let data={
					account:a,
					password:b,
					type:1
				}
				login(data).then(res=>{
					that.user1=res.data
					console.log(that.user1,"登录登录")
					that.id = that.user1.id
					if(that.user1.nickname == ''){
						that.nickname='未填写'
					}else{
						that.nickname=that.user1.nickname
					}
					if(that.user1.username == ''){
						that.username='请输入姓名'
					}else{
						that.username=that.user1.name
					}
					if(that.user.gender == 1){
						that.gender='男'
					}else{
						that.gender='女'
					}
					if(that.user1.mobile == ''){
						that.mobile='未认证'
					}else{
						that.mobile=that.user1.mobile
					}
					console.log(that.user)
					if (that.user1.avatar == null || that.user1.avatar == '') {
						that.avaS = false
					}
					that.avatar = 'https://dy.nuofenggr.com' +that.user1.avatar
					
				}).catch(err=>{
					
				})
			},
			login2(){
				let a = uni.getStorageSync('mobile')
				let b = uni.getStorageSync('password')
				console.log(a,b)
				let data={
					account:a,
					password:b,
					type:1
				}
				login(data).then(res=>{
					console.log(res,"登录登录")
					uni.setStorageSync('regionMessage',res.data)
					uni.getStorageSync('regionMessage',res.data)
				}).catch(err=>{
					
				})
			},
			chooseImage() {
				let that = this
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'https://dy.nuofenggr.com/api/Common/upload', //仅为示例，非真实的接口地址
							header: {
								token: uni.getStorageSync('token'),
							},
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (data) => {
								that.avatar = JSON.parse(data.data).data.fullurl
								let a = JSON.parse(data.data).data.url
								let data1 = {
									file: a,
									user_id:that.id
								}
								editUser(data1).then(res => {
									uni.showToast({
										title:'修改成功',
										icon:'none'
									})
									that.login2()
								}).catch(err => {
									uni.showToast({
										title:'修改失败',
										icon:'none'
									})
									
								})
							}
						});
					}
				});
			},
			tuichu: function() {
				this.tui = true
				
			},
			quxiao(){
				this.tui = false
			},
			que_ding(){
				uni.clearStorageSync('regionMessage')
				uni.reLaunch({
					url:'/pages/index/choice'
				})
				
			},
			tuiding: function() {
				this.tui = false
			},


			navto: function(e) {
				var a = e.currentTarget.dataset
				uni.navigateTo({
					url: a.url
				})


			},


			backClick() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.jia {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.zhezhao {
		background: rgba(0, 0, 0, 0.3);
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.kuang {
			padding: 68rpx;

			background: #FFFFFF;
			margin: 0 40rpx;
			width: 100%;
			border-radius: 32rpx;
			position: relative;

			.cha {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				width: 30rpx;
				height: 30rpx;
			}

			.kuang_title {
				text-align: center;
			}

			.liecan {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 80rpx;

				.qu {
					padding: 20rpx 70rpx;
					background: rgba(24, 85, 246, 1);
					font-size: 30rpx;
					border-radius: 3000rpx;
					color: #fff;
				}

				.que {
					padding: 20rpx 70rpx;
					background: rgba(216, 222, 240, 1);
					font-size: 30rpx;
					border-radius: 3000rpx;
					color: rgba(24, 85, 246, 1);
				}
			}
		}

	}

	.tuideng {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;

		view {
			width: 340rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 1000px;
			background: #1855F6;
			font-size: 30rpx;
			color: #fff;
			text-align: center;
		}
	}

	page {
		background-color: #FFFFFF;
	}

	.li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 35rpx 42rpx;
		border-bottom: 1px solid rgba(138, 142, 153, 0.2);

		.li_1 {
			font-size: 34rpx;
			color: #303133;

		}

		.li_2 {
			display: flex;
			align-items: center;

			.li_2_1 {
				font-size: 26rpx;
				color: #909299;
				margin-right: 20rpx;
			}

			.li_2_2 {
				width: 23rpx;
				height: 38rpx;
			}

		}
	}

	.setUp {
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 40rpx;

		.navBox {
			width: 100%;
			height: 400rpx;
			position: relative;

			.bgImg {
				width: 100%;
				height: 100%;
			}

			.navBox1 {
				width: 100%;
				height: 100%;
				position: absolute;
				// top: calc(var(--status-bar-height) + 10rpx);
				top: 0;
				left: 0;
				overflow: hidden;

				.title {
					width: 100%;
					margin-top: calc(var(--status-bar-height) + 30rpx);
					justify-content: space-between;
					position: relative;

					.icon_back_lift {
						width: 22rpx;
						height: 38rpx;
						margin-left: 40rpx;
						position: absolute;
						top: 5rpx;
						left: 10rpx;
					}

					.navWord {
						width: 100%;
						text-align: center;
						font-size: 40rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						margin: 0 auto;
					}
				}

				.navImg {
					width: 100rpx;
					height: 100rpx;
					position: relative;
					margin: 55rpx auto 0;
					border-radius: 50%;

					.tx {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}
				}

				.nickName {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FEFEFE;
					text-align: center;
					margin-top: 24rpx;
				}
			}
		}
	}
</style>
